<template>
  <div>
    <div class="box-left">
      <div class="hede">
        <ec-user ref="refUser"></ec-user>
        <ec-device ref="refDevice"></ec-device>
      </div>
      <ec-table ref="refTable" @resultTabl="resultTabl"></ec-table>
    </div>

    <div class="box-right">
      <ec-middle
        ref="refMiddle"
        @on-addgoods="onAddgoods"
        @on-remove-goods="onRemoveGoods"
        @on-addgoods-all="onAddgoodsAll"
        @on-remove-goods-all="onRemoveGoodsAll"
      ></ec-middle>
      <div class="content">
        <ec-order ref="refOrder"></ec-order>
        <ec-result ref="refResult"></ec-result>
      </div>
    </div>

    <ec-footer ref="refEcFooter"></ec-footer>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import useSettingsStore from '@/store/modules/settings'
import ecTable from '@/views/cashier-desk/components/table.vue'
import ecFooter from '@/views/cashier-desk/components/footer.vue'
import ecDevice from '@/views/cashier-desk/components/device.vue'
import ecUser from '@/views/cashier-desk/components/user.vue'
import ecResult from '@/views/cashier-desk/components/result.vue'
import ecOrder from '@/views/cashier-desk/components/order.vue'
import ecMiddle from '@/views/cashier-desk/components/middle.vue'
import hotkeys from 'hotkeys-js'
import router from '@/router/index'

const settingsStore = useSettingsStore()
const sideBgColor = computed(() => settingsStore.sideBgColor)
const refTable = ref()
const refResult = ref()
//添加商品
const onAddgoods = () => {
  console.log('添加商品')

  console.log(refTable.value.toggleSelection())
}
//添加商品
const onRemoveGoods = () => {
  console.log('添加商品')
}
//全部添加
const onAddgoodsAll = () => {
  refTable.value.toggleSelectionAll()
}
//全部删除
const onRemoveGoodsAll = () => {
  console.log('全部添加')
  refResult.value.removeSelectionAll()
}

//table数据反回结果
const resultTabl = (data: []) => {
  refResult.value.setTableData(data)
}

//按ESC 返回首页
hotkeys('esc', function (event, handler) {
  switch (handler.key) {
    case 'esc':
      router.push({ path: '/' }) //测试
      break
  }
})
</script>

<style lang="scss" scoped>
.box-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  display: flex;
  background-color: #f5f5f5;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  .hede {
    display: flex;
    justify-content: space-between;
  }
}
.box-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  display: flex;
  background-color: #f5f5f5;
  overflow-y: auto;

  .content {
    width: 100%;
    background-color: #f5f5f5;
    padding: 0 10px;
    box-sizing: border-box;
    height: calc(100% - 60px);
    overflow-y: auto;
  }
}
</style>
